//封装一个代替getElementById()的方法
function byId(id){
	return typeof(id) == "string"?document.getElementById(id):id;
}

//全局变量
var index = 0;
var	timer = null;
var pics = byId('banner').getElementsByTagName('div');
var	dots = byId('dots').getElementsByTagName('span');
var prev = byId('prev');
var next = byId('next');
var	len = pics.length;
	
function sildeImg(){
	var main = byId('main');
	//滑过清除定时器，离开继续
	main.onmouseover = function(){
		//滑过清除定时器
		if(timer) clearInterval(timer);
	}
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;
			if(index >= len){
				index = 0;
			}
			//切换图片
			changeImg();
		},3000);
	}
	//自动在main上触发鼠标离开事件
	main.onmouseout();
	//遍历所以点击，且绑定点击事件，点击圆点切换
	for (var d = 0; d < len; d++) {
		dots[d].id = d;
		dots[d].onclick = function(){
			//改变index为当前span的id值
			index = this.id;
			//调用changeImg, 实现切换图片
			changeImg();
		}
	}
	//下一张
	next.onclick = function(){
		index++;
		if(index >= len) index=0;
		changeImg();
	}
	//上一张
	prev.onclick = function(){
		index--;
		if(index < 0) index=len;
		changeImg();
	}
}

//切换图片
function changeImg(){
	//遍历banner下多有的div以及dots下所有的span，将div隐藏
	for (var i = 0; i < len; i++) {
		pics[i].style.display = 'none';
		dots[i].className = ''
	};
	//根据index索引找到当前div和当前span，将其显示出来
	pics[index].style.display = 'block';
	dots[index].className = 'active';
}
sildeImg();